<template>
    <d2-container>
      <el-row>
            <el-col :lg="12">
              <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="100px">
                <el-form-item label="标题" prop="title">
                    <el-input placeholder="标题" v-model="detailForm.title"></el-input>
                </el-form-item>
                <el-form-item label="链接" prop="linkName">
                    <el-input placeholder="链接" v-model="detailForm.linkName" readonly @focus="fnOpenPopup"></el-input>
                </el-form-item>
                <el-form-item label="缩略图" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            :http-request="handleAvatarSuccess"
                            :show-file-list="false">
                        <img v-if="detailForm.image" :src="detailForm.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" @click="submitForm('detailForm')">确定</el-button>
                    <el-button @click="resetForm('detailForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
      </el-row>
              <el-dialog title="商品列表" :visible.sync="dialogDataVisible">
            <el-table :data="tableData"
                      width="100%"
                      ref="ref_table"
                      highlight-current-row
                      @current-change="handleRadioTable">
                <el-table-column prop="name" label="名称"/>
                <el-table-column prop="brief" label="简介">
                    <template slot-scope="{row: {brief}}">
                        <span>{{brief | subStr(10)}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fnClosePopup">取 消</el-button>
                <el-button type="primary" @click="fnSaveChoosed">确 定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
  import uploadMixin from '../mixins/uploadMixin'
  import tableMixin from '../mixins/tableMixin'
  import { changeAdvertisement, getOneAdvertisement, getProductList } from '@/api/admin'
  export default {
    name: 'changeAd',
    mixins: [uploadMixin, tableMixin],
    data() {
      return {
        dialogDataVisible: false,
        detailForm: {
          title: '',
          link: '',
          linkName: '',
          image: ''
        },
        rules: {
          title:[
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          linkName:[
            { required: true, message: '请选择链接', trigger: 'blur' }
          ],
          image:[
            { required: true, message: '请选择缩略图', trigger: 'blur' }
          ]
        },
        choosedDataObj: {}
      }
    },
    created () {
    },
    methods: {
      // 单图片上传
      async handleAvatarSuccess(file) {
          this.detailForm.image = await this.fnUpload(file)
      },
      // 表单提交
      submitForm (formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            const res = await changeAdvertisement(this.detailForm)
            this.$router.push({name: 'adList'})
          } else {
            return false;
          }
        });
      },
      // 表单重置
      resetForm (formName) {
        this.$nextTick(() => {
          this.detailForm.link = ''
        })
        this.$refs[formName].resetFields()
      },
      // 打开商品弹框
      fnOpenPopup () {
        this.dialogDataVisible = true
        this.getTableData()
      },
      fnClosePopup () {
        this.dialogDataVisible = false
        this.choosedDataObj = {}
      },
      // 获得商品列表
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        
        const { code, data: { total, currentPage, data, pageSize } } = await getProductList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = data
      },
      handleRadioTable(value) {
        this.choosedDataObj = value
      },
      fnSaveChoosed () {
        this.detailForm.link = this.choosedDataObj._id
        this.detailForm.linkName = this.choosedDataObj.name
        this.fnClosePopup()
      }
    }
  }
</script>

<style scoped>
    .from_width {
        width: 40%;
    }

    .img_ul {
        list-style: none;
        margin:0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }

    .img_li {
        margin-right: 10px;
        position: relative;
    }

    .img_delete {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
    }
</style>
